package ru.onlinestore.mobile.ui.main

import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.Font
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import coil.compose.AsyncImage
import ru.onlinestore.mobile.R
import ru.onlinestore.mobile.ui.entities.ProductUI
import ru.onlinestore.mobile.ui.theme.white

@Composable
@Preview(
    showBackground = true,
    device = "id:Xiaomi POCO M5s"
)
private fun ItemProductPreview() =
    ItemProduct(
        product = ProductUI(
            id = 1,
            title = "Телефон",
            description = "",
            price = 0.0,
            brand = "",
            category = "",
            thumbnail = "https://sun9-63.userapi.com/impg/TYvjz8Y8YcpHMdgNyLdxPOs-OPaGZ1acIpGjR" +
                    "w/ej_O0YoMKlg.jpg?size=2560x1920&quality=96&sign=87681d2fa3a37e725975df062" +
                    "26407ed&type=album",
            images = listOf(
                ""
            )
        )
    )

@Composable
fun ItemProduct(product: ProductUI) {
    Column(
        content = {
            AsyncImage(
                model = product.thumbnail,
                contentDescription = null,
                placeholder = painterResource(id = R.drawable.ic_launcher_background),
                modifier = Modifier
                    .padding(12.dp)
            )
            Text(
                text = product.title,
                style = TextStyle(
                    fontFamily = FontFamily(
                        Font(R.font.roboto)
                    )
                ),
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(
                        start = 12.dp,
                        end = 12.dp,
                        bottom = 12.dp
                    )
            )
        },
        modifier = Modifier
            .fillMaxWidth()
            .border(
                1.dp,
                color = Color(0xFFCFCFCF),
                shape = RoundedCornerShape(12.dp)
            )
            .background(
                color = white,
                shape = RoundedCornerShape(12.dp)
            )
    )
}